<template>
  <div>
    <a-input :value="fieldNames" placeholder="请选择字段" @click="open"/>
    <FieldShowConfigModal
      :includeForms="includeForms"
      title="业务列表显示项" @ok="selected"
      :formDefinition="formDefinition"
      ref="FieldShowConfigModal"/>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import FieldShowConfigModal from '@comp/hhd/design/FormMenu/FieldShowConfigModal.vue';
import {getFieldConfigById} from '@/utils/FormDesignUtils';

export default {
  name: 'RelationShowFieldListConfig',
  components: {FieldShowConfigModal},
  model: createModelForVue(),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    value: createProps(Array),
    includeForms: createProps(Array, () => undefined),
  },
  data() {
    return {};
  },
  methods: {
    open() {
      let dataSource = (this.value || []).map(item => ({
        id: item.fieldId,
        formId: item.formId,
        label: item.label,
      }));
      this.$refs.FieldShowConfigModal.open(dataSource);
    },
    change(v) {
      this.$emit('change', v);
    },
    selected(dataSource) {
      let list = dataSource.map(item => ({
        fieldId: item.id,
        formId: item.formId,
        label: item.label,
      }));
      this.change(list);
    },
  },
  computed: {
    fieldNames() {
      let list = this.value || [];
      if(!list || !list.length) return undefined
      return list.map(f => {
        let fieldConfig = getFieldConfigById(f.fieldId, this.formDefinition);
        return f.label || fieldConfig && fieldConfig.label || undefined;
      }).toString();
    },
  }
};
</script>